{% extends '::base.html.twig' %}
{% block stylesheets %}
<link href="{{ asset('bundles/histclinica/css/bootstrap.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/histclinica/css/bootstrap-theme.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/histclinica/css/navbar.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/histclinica/css/general.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/histclinica/css/fullcalendar.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/histclinica/css/fullcalendar.print.css') }}" rel="stylesheet" media="print" />
<link href="{{ asset('bundles/histclinica/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" type="text/css" />
<style>

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .jornadalaboral{
            background-color: #a8a8ff;
            width: 50px;
        }

    </style>
        {% endblock %}
{% block javascripts %}
    <script src="{{ asset('bundles/histclinica/js/moment.min.js') }}"></script>
    <script src="{{ asset('bundles/histclinica/js/jquery.js') }}"></script>
    <script src="{{ asset('bundles/histclinica/js/bootstrap.js') }}"></script>
    <script src="{{ asset('bundles/histclinica/js/fullcalendar.js') }}"></script>
    <script src="{{ asset('bundles/histclinica/js/es.js') }}"></script>
    <script src="{{ asset('bundles/histclinica/js/bootstrap-datetimepicker.min.js') }}"></script>

    <script language="javascript" type="text/javascript">
        var _actualEvent = null;        
        var _actualEventId= -1;
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },                
                lang: 'es',
                defaultView: 'agendaWeek',
                editable: false,
                eventLimit: true, // allow "more" link when too many events
                allDaySlot: false, 
                slotDuration: '00:10:00',                
                minTime: '07:00:00',
                maxTime: '19:00:00',
                selectable: true,
                selectHelper: true,
                events: {
                    url: '{{path('cita_getAllCalendar')}}',                    
                    error: function() {
                            $('#script-warning').show();
                    }   
                },                
                select: function(start, end) {
                    if(start.format('YYYY-MM-DD') !== end.format('YYYY-MM-DD')){
                        jQuery("#informativeBody").html('<h4>¡No es posible registrar una cita con fecha de inicio y fin diferentes!</h4>');
                        jQuery("#informativeModal").modal('show');
                        return;
                    }                         
                    clearForm();
                    jQuery("input[name='fecha']").val(start.format('YYYY-MM-DD'));                                    
                    jQuery("input[name='horaInicio']").val(start.format('HH:mm'));
                    jQuery("input[name='horaFin']").val(end.format('HH:mm'));
                    jQuery('#deleteDispButton').hide();
                    jQuery("#myModal").modal('show');
                },    
                eventClick: function(calEvent, jsEvent, view) {                    
                    if(calEvent.id == 'nodisp') return;
                    jQuery("#citaIdHidden").val(calEvent.id);
                    jQuery.post('{{path('cita_getCita')}}',
                        {   citaId: calEvent.id },
                        function(response) {                            
                            if(response.sucess === "ok"){
                                clearForm();
                                jQuery("#citaIdHidden").val(calEvent.id);
                                jQuery('#fecha').val(response.fecha);
                                jQuery('#horaInicio').val(response.horaInicio) ;
                                jQuery('#horaFin').val(response.horaFin);                            
                                jQuery('#selMedico').val(response.medicoId);      
                                jQuery("#selPaciente").val(response.pacienteId);
                                jQuery("#selEstado").val(response.estado);
                                jQuery("#selUnidad").val(response.unidadId);
                                jQuery('#deleteDispButton').show();
                                jQuery("#myModal").modal('show'); 
                            }
                            else{
                                clearForm();
                                jQuery("#resultMessage").html('<span>' + response.error + '</span>');
                                jQuery('#deleteDispButton').hide();
                                jQuery('#saveCiteButton').hide();
                                jQuery("#myModal").modal('show');
                            }                            
                        }, "json"); 
                     $(this).css('background-color', '#ddd');
                    _actualEvent = $(this);
                },
                  
            });
        });
        
        jQuery(document).ready(function() {
            jQuery('#datetimepickerInicio').datetimepicker({ pickTime: false });
            jQuery('#timepickerInicio, #timepickerFin').datetimepicker({ pickDate: false});
            jQuery("#resultMessage").hide();
            jQuery("#btnAddPaciente").click(function(){
                jQuery(this).hide();
                jQuery("#divRegistrarPaciente").show();                          
            });
            jQuery("#btnCancelarGuardado").click(function(){
                jQuery("#divRegistrarPaciente").hide();
                jQuery("#btnAddPaciente").show();
            });   
            
            
            jQuery('#saveCiteButton').click(function() {
                var pacienteID = jQuery("#selPaciente").val();
                if(pacienteID <= 0){
                    jQuery("#resultMessage").html('<span>¡Debe seleccionar un paciente!</span>');
                    jQuery("#resultMessage").show();
                    return; 
                }
                else { jQuery("#resultMessage").hide(); }
                var fecha = jQuery('#fecha').val();
                var horaInicio =  jQuery('#horaInicio').val() + ':00';
                var horaFin = jQuery('#horaFin').val() + ':00';                            
                var medicoId = jQuery('#selMedico').val();      
                
                var estado = jQuery("#selEstado").val();
                var unidadId = jQuery("#selUnidad").val();
                var citaId = jQuery("#citaIdHidden").val();
                
                jQuery.post('{{path('cita_register')}}',
                        {   fecha: fecha, horaInicio: horaInicio, horaFin: horaFin, 
                            medicoId: medicoId, pacienteId: pacienteID,
                            estado: estado, unidadId: unidadId, citaId: citaId },
                        function(response) {                           
                            if(response.sucess === "ok"){
                                $('#calendar').fullCalendar('refetchEvents'); // stick? = true
                                jQuery("#myModal").modal('hide'); 
                            }
                            else{
                                jQuery("#resultMessage").html('<span>' + response.error + '</span>');
                            }                            
                        }, "json"); 
                
            });
            
            jQuery('#btnGuardarPaciente').click(function(){
                var apellido1 = jQuery('#txtapellido1').val();
                var apellido2 = jQuery('#txtapellido2').val();
                var nombres = jQuery('#txtnombres').val();
                var telefonos = jQuery('#txttelefonos').val();
                var tipoId = jQuery('#seltipoid').val();
                var noId = jQuery('#txtnoid').val();
                var eps = jQuery('#seleps').val();
                var convenio = jQuery('#selconvenio').val();
                
                
                jQuery.post('{{path('paciente_registroRapido')}}',
                        {   apellido1: apellido1, apellido2 : apellido2, nombres : nombres, telefonos : telefonos, tipoId : tipoId, noId : noId, eps : eps, convenio : convenio  },
                        function(response) {                            
                            if(response.sucess === "ok"){
                                $("#selPaciente").append(new Option(nombres + ' ' + apellido1 + ' ' + apellido2 , response.idpaciente));
                                 jQuery("#btnAddPaciente").show();                
                                jQuery("#divRegistrarPaciente").hide();                          
                            }
                        }, "json"); 
                
            });
            
            jQuery('#deleteDispButton').click(function() {
                if(!confirm('¿Esta seguro de borrar la cita?')) return;
                _actualEventId = jQuery("#citaIdHidden").val();
                jQuery.post('{{path('cita_remove')}}',
                        {citaId: _actualEventId },
                        function(response) {  
                            if(response.sucess === "ok"){
                               if(_actualEventId > 0){
                                    $('#calendar').fullCalendar( 'removeEvents', _actualEventId );
                               }
                               else                               {
                                    $('#calendar').fullCalendar('refetchEvents'); // stick? = true   
                                }
                            }
                        }, "json");
                jQuery("#myModal").modal('hide');
            });
            
            jQuery("#cancelButton").click(function(){
                jQuery("#myModal").modal('hide');
                clearEvent();
            });
        });
        
        function clearEvent()
        {
            if(_actualEvent !== null){
                _actualEvent.css('background-color', '#428BCA');
           }
        }
        
        function clearForm(){
            jQuery('#fecha').val('1900-01-01');
            jQuery('#horaInicio').val('01:00:00') ;
            jQuery('#horaFin').val('01:10:00');                            
            jQuery('#selMedico').val(-1);      
            jQuery("#selPaciente").val(-1);
            jQuery("#selEstado").val(-1);
            jQuery("#selUnidad").val(-1);
            jQuery("#citaIdHidden").val(-1);
            jQuery("#divRegistrarPaciente").hide();           
            jQuery("#btnAddPaciente").show();
            jQuery("#selconvenio").val(-1);
            jQuery("#seleps").val('');
            jQuery("#seltipoid").val(-1);
            jQuery("#txtnoid").val('');
            jQuery("#txttelefonos").val('');
            jQuery("#txtnombres").val('');
            jQuery("#txtapellido2").val('');
            jQuery("#txtapellido1").val('');
        }

        </script>

{% endblock %}

{% block body -%}
        
        <input type="hidden" value="0" id="medicoId" name="medicoId">
        <!-- Popup para presentar informacion al usuario -->
        <div id="informativeModal" class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header" style="text-align: center" >
                <h3>Aviso</h3>
            </div>
            <!-- dialog body -->
            <div class="modal-body" id="informativeBody">
              
            </div>
            <!-- dialog buttons -->
            <div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">Aceptar</button></div>
          </div>
        </div>
      </div>
        <!-- Popup para registrar una nueva disponibilidad -->
        <div id="myModal" class="modal fade">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header" style="text-align: center">
                        <h3>Registrar Cita</h3>
                    </div>
                    <div class="modal-body" style="margin-left:10px; margin-right: 10px;">
                       <input type="hidden" value="-1" id="citaIdHidden" name="citaIdHidden" />
                        <div class="row">
                            <div class="col-md-2">Hora: </div>
                            <div class="col-md-3" style="white-space: nowrap;">
                                <div style="" id="timepickerInicio" class="input-append date">
                                    <input data-format="hh:mm" type="text" name="horaInicio" id="horaInicio" ></input>
                                    <span class="add-on">
                                        <img src="{{ asset('bundles/histclinica/images/calendar.png') }}">
                                    </span>
                                </div>

                            </div>
                            <div class="col-md-2">hasta</div>
                            <div class="col-md-3" style="white-space: nowrap;">
                                <div style="" id="timepickerFin" class="input-append date">
                                    <input data-format="hh:mm" type="text" name="horaFin" id="horaFin" ></input>
                                    <span class="add-on">
                                        <img src="{{ asset('bundles/histclinica/images/calendar.png') }}">
                                    </span>
                                </div>                    
                            </div>
                        </div>
                        
                        <div class="row" tag="forRecurrence"  status="hidden" >
                            <div class="col-md-2">Fecha: </div>
                            <div class="col-md-3" style="white-space: nowrap;">
                                <div style="" id="datetimepickerInicio" class="input-append date">
                                    <input data-format="yyyy-MM-dd" type="text" name="fecha" id="fecha" ></input>
                                    <span class="add-on">
                                        <img src="{{ asset('bundles/histclinica/images/calendar.png') }}">
                                    </span>
                                </div>

                            </div>     
                            
                             <div class="col-md-2">
                                Medico
                            </div>
                            <div class="col-md-3">
                                <select id="selMedico" >
                                    <option value="-1"> </option>
                                 {% for medico in medicos %}
                                        <option value="{{ medico.id }}">
                                            {{ medico.nombreCompleto }}
                                            </option>                                        
                                {% endfor %}
                                </select>
                            </div>
                        </div>
                        
                        <div class="row" style="" >
                            <div class="col-md-2">Estado</div>
                            <div class="col-md-3">
                                <select id="selEstado" >
                                    <option value="-1"> </option>
                                    <option value="0">Reservada</option>
                                    <option value="1">Confirmada</option>
                                    <option value="2">Realizada</option>
                                    <option value="3">Cancelada</option>
                                </select>
                            </div>
                                
                           <div class="col-md-2">
                                Unidad
                            </div>
                            <div class="col-md-3">
                                 <select id="selUnidad" >
                                     <option value="-1"> </option>
                                 {% for unidad in unidades %}
                                        <option value="{{ unidad.id }}">
                                            {{ unidad.descripcion }}
                                            </option>                                        
                                {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="row" style="">
                            <div class="col-md-2">
                                Paciente
                            </div>
                            <div class="col-md-4">
                                 <select id="selPaciente" >
                                     <option value="-1"> </option>
                                    {% for paciente in pacientes %}
                                           <option value="{{ paciente.id }}">{{ paciente }}</option>                                        
                                    {% endfor %}
                                </select>
                                <button type="button" class="btn btn-default" id="btnAddPaciente" >+</button>
                            </div>                                
                        </div>
                       <div class="row" id="divRegistrarPaciente" style="border-width: 1px; border-style: solid; border-color: #CCC; border-radius: 10px; margin: 10px; ">                           
                           <div class="col-md-12">
                               <h3>Registrar paciente</h3>
                               <div class="row">
                                   <div class="col-md-2">1er Apellido</div>        
                                   <div class="col-md-3"><input type="text" id="txtapellido1" /></div>        
                                   <div class="col-md-2">2do Apellido</div>        
                                   <div class="col-md-3"><input type="text" id="txtapellido2" /></div>        
                               </div>
                               <div class="row">
                                   <div class="col-md-2">Nombres</div>        
                                   <div class="col-md-3"><input type="text" id="txtnombres" /></div>        
                                   <div class="col-md-2">Tel&eacute;fono</div>        
                                   <div class="col-md-3"><input type="text" id="txttelefonos" /></div>        
                               </div>
                                   
                               <div class="row">
                                   <div class="col-md-2">Tipo Id</div>        
                                   <div class="col-md-3">
                                       <select id="seltipoid">
                                           <option vale="1">C&eacute;dula de ciudadan&iacute;a</option>
                                           <option vale="2">Registro civil</option>
                                           <option vale="3">C&eacute;dula extranger&iacute;a</option>
                                           <option vale="4">Tarjeta de identidad</option>                                           
                                       </select>
                                   </div>        
                                   <div class="col-md-2">No Id</div>        
                                   <div class="col-md-3"><input type="text" id="txtnoid" /></div>        
                               </div>
                               <div class="row">
                                   <div class="col-md-2">Eps</div>        
                                   <div class="col-md-3">
                                       <input type="text" id="seleps" />
                                       <!--  <select id="seleps">
                                           <option vale="-1"></option>
                                       </select> -->
                                   </div>        
                                   <div class="col-md-2">Convenio</div>        
                                   <div class="col-md-3">
                                        <select id="selconvenio">
                                           <option vale="-1"></option>
                                            {% for convenio in convenios %}
                                                    <option value="{{ convenio.id }}">{{ convenio }}</option>                                        
                                             {% endfor %}
                                        </select>
                                   </div>        
                               </div>
                               <div class="row" style="text-align: right;">                                   
                                   <button type="button" class="btn btn-default" id="btnCancelarGuardado" >Cancelar</button>
                                   <button type="button" class="btn btn-default" id="btnGuardarPaciente" >Guardar</button>
                               </div> 
                           </div>
                       </div>
                       
                        <div style="color: red; font-weight: bold;" id="resultMessage" ></div>     
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="cancelButton">Cancelar</button>
                        <button type="button" class="btn btn-primary" id="deleteDispButton">Borrar</button>
                        <button type="button" class="btn btn-primary" id="saveCiteButton">Guardar</button>
                    </div>
                        
                </div>
            </div>
        </div>
        
        
        <div style="margin-bottom: 10px;">
        <div style="background-color: #1CA9A3; border-radius: 8px; text-align: center; color: white; padding-top: 3px; padding-bottom: 3px;  width: 900px; margin: 0 auto; ">
                   <h3>Programaci&oacute;n de citas</h3>
        </div>
                </div>
        
        <div id='calendar'></div>

{% endblock %}
